<template>
  <div class="demo">
    <el-cascader :options="areaSelectData" @change="handleChange" class="full-width" size="large"
      v-model="selectedOptions" placeholder="请选择您所在的城市" clearable></el-cascader>
    <!-- {{hopeAddrpare}} -->
  </div>
</template>

<script>
import { regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';// 地址级联选择器
export default {
  name: 'ThreeLevel',
  data () {
    return {
      areaSelectData: regionDataPlus, // options绑定的数据就是引入的 regionData
      selectedOptions: [], // 地区选择参数，['省区域码', '市区域码']
      infoForm: {},
    }
  },
  created () {
  },
  props: ["hopeAddrpare"],
  watch: {
    hopeAddrpare: function (newData) {
      this.selectedOptions = newData
      this.init(this.selectedOptions)
    }
  },
  methods: {
    init (res) {
      //   console.log(res);
      //   if (this.hopeAddrpare != null) {
      //   this.selectedOptions = this.hopeAddrpare
      //   }
    },
    getCity () {
      var self = this;
      let data = localStorage.getItem('kimid');
      self.$api.getcustomers(data).then(res => {
        self.infoForm.province = res.data.province,//省
          self.infoForm.city = res.data.city;
        self.formatCity();
      })
    },
    // 获取到省市数据，进行格式化
    formatCity () {
      var self = this;
      //   console.log(self.infoForm.province, self.infoForm.city);
      // TextToCode属性是汉字，属性值是区域码 TextToCode['北京市'].code输出110000
      // 省份
      var provinceCode = TextToCode[self.infoForm.province].code;
      // 城市
      var cityCode = TextToCode[self.infoForm.province][self.infoForm.city].code;
      self.selectedOptions = [provinceCode, cityCode];
      this.init()
    },
    // 编辑格式化地址
    handleChange () {
      var self = this;
      var provinceCode = self.selectedOptions[0];
      var cityCode = self.selectedOptions[1];
      var areaCode = self.selectedOptions[2];
      //   let obj = {}
      // CodeToText属性是区域码，属性值是汉字 CodeToText['110000']输出北京市
      //   obj.province = CodeToText[provinceCode];
      //   this.$set(self.infoForm, "province", CodeToText[provinceCode])
      self.infoForm.province = CodeToText[provinceCode];
      self.infoForm.city = CodeToText[cityCode];
      self.infoForm.county = CodeToText[areaCode];

      self.infoForm.provinceId = provinceCode;
      self.infoForm.cityId = cityCode;
      self.infoForm.countyId = areaCode;
      //   console.log(self.infoForm.province);
      self.$emit('hopename', self.infoForm)
      //   console.log("选择的省市：", self.infoForm.province, self.infoForm.city);
      //   console.log("选择的省市：", provinceCode, cityCode, areaCode);
    },
  }
}
</script>

<style scoped>
</style>